<template>
    <main>
        <v-header></v-header>
        <div class="topBar">
            <p>个人与家用产品><span></span></p>
        </div>
        <div class="topbox">
          <router-link :to="{name:'fridge'}">冰箱 冷柜</router-link>
          <router-link :to="{name:'winebar'}">冰吧 酒柜</router-link>
          <router-link :to="{name:'wash'}">洗衣机</router-link>
          <router-link :to="{name:'aircon'}">空调</router-link>
          <router-link :to="{name:'tv'}">电视</router-link>
          <router-link :to="{name:'hot'}">热水器</router-link>
          <router-link :to="{name:'kitchen'}">厨房电器</router-link>
          <router-link :to="{name:'computer'}">电脑及外设</router-link>
          <router-link :to="{name:'little'}">小家电</router-link>
        </div>
        <router-view></router-view>
    </main>
</template>

<style scoped>
    .topbox{
        width:22%;
        height:667px;
        background:	#F5F5F5;
        float:left;
    }
    a{
      text-decoration: none;
      font-size:10px;
      font-weight:600;
    }
    .topbox div{
        text-align: center;
    }
    .topBar{
        width:93%;
        padding:10px;
        border-top:1px solid lightgray;
        border-bottom:1px solid lightgray;
        background: #fff;
    }
    .topBar>p{
        width:90%;
        line-height:30px;
        font-size:15px;
        font-weight: 600;
        color:#0c5ca8;
        position:relative;
    }
    .topBar span{
        width:5%;
        height:4px;
        text-align:center;
        background: darkgray;
        float:right;
        position: absolute;
        top:40%;
        right:0;
    }
    .topbox>a{
        display: block;
        width: 100%;
        line-height: 40px;
        text-align: center;
        color: #000;
        font-size:12px;
        font-weight:300;
    }
    .change{
      color:#0c5ca8;
    }
    .router-link-active{
        border-left:2px solid #0c5ca8;
        background: #fff;
    }
</style>

<script>
import vheader from '../sub/header'

export default{

    data(){
      return{
        id:0,
      }
    },
    mounted(){
     this.$store.state.msg= "jump"
    },
    components:{
        'v-header':vheader,
    }
}

// var as = document.getElementsByName('a');

// for(var i=0;i<as.length;i++){
//   // as[i].n=i;
//   as[i].onclick=function(){
//     // var index=this.n;
//     for(var j=0;j<as.length;j++){
//       as[j].style.color="#0c5ca8";
//     }
//     this.style.color="#0c5ca8";
//   }
// }



</script>
